import { appStore } from '@renderer/store/modules/app'
import { defineComponent } from 'vue'
import { useKeyboard } from '@renderer/hooks/useKeyboard'
import { useGridShow } from '@renderer/hooks/useGridShow'
import useClickEvent from '@renderer/hooks/useClickEvent'

export default defineComponent({
  name: 'GameBoard',
  props: {
    currentSkill: {
      type: String
    }
  },
  setup (props) {
    useKeyboard()
    const { showLabel, labelFont } = useGridShow()
    const { isActive, useSkill } = useClickEvent(props)
    /* render 函数 */
    return () => {
      const { gridSize, flatGridData } = appStore
      const gridItems = flatGridData.map((item, index) => (
        <div
          class={`grid-item text-white ${labelFont(item)} p-1 ${isActive(index) ? 'grid-item--active' : ''}`}
          style={{ width: `${100 / gridSize}%`, height: `${100 / gridSize}%` }}
          onClick={() => { useSkill(index) }}>
          <div class="flex-center w-full h-full bg-indigo-300 rounded">
            { showLabel(item) }
          </div>
        </div>
      ))
      return (
        <div class={`game-board flex flex-wrap`}>
          { gridItems }
        </div>
      )
    }
  }
})
